<!-- Page header -->
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <!-- Page pre-title -->
        <div class="page-pretitle">
          <div class="slogan-container">
            <div class="slogan-icon-left">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon-tabler-code" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M7 8l-4 4l4 4"></path>
                <path d="M17 8l4 4l-4 4"></path>
                <path d="M14 4l-4 16"></path>
              </svg>
            </div>
            <div class="slogan-text">
              一个专为大学生编程技术发烧友提供交流的平台
            </div>
            <div class="slogan-icon-right">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon-tabler-users-group" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                <path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1"></path>
                <path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                <path d="M17 10h2a2 2 0 0 1 2 2v1"></path>
                <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                <path d="M3 13v-1a2 2 0 0 1 2 -2h2"></path>
              </svg>
            </div>
            <div class="slogan-decoration"></div>
          </div>
        </div>
        <h2 class="page-title" id="article_list_board_title">
          <!-- 替换为板块名 -->
           首页
        </h2>
        <!-- 帖子数量 -->
        <div class="text-muted mt-1" id="article_list_count_board"></div>
      </div>
      <!-- Page title actions -->
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <!-- 发新帖按钮 宽屏 -->
          <a  href="javascript:void(0);" class="btn btn-primary d-none d-sm-inline-block article_post">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
              stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M12 5l0 14" />
              <path d="M5 12l14 0" />
            </svg>
            发布帖子
          </a>
          <!-- 发新帖按钮 窄屏 -->
          <a href="javascript:void(0);" class="btn btn-primary d-sm-none btn-icon article_post" aria-label="发布帖子">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
              stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M12 5l0 14" />
              <path d="M5 12l14 0" />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Page body -->
<div class="page-body">
  <div class="container-xl">
    <div class="row justify-content-center">
      <!-- 左侧内容区域 -->
      <div class="col-12 col-lg-8">
        <!-- 热帖区域 -->
        <div class="col-12 mb-3" id="hot-articles-section" style="display: none;">
          <div class="card">
            <div class="card-header">
              <h3 class="card-title">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-flame" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                  <path d="M12 12c2 -2.96 0 -7 -1 -8c0 3.038 -1.773 4.741 -3 6c-1.226 1.26 -2 3.24 -2 5a6 6 0 1 0 12 0c0 -1.532 -1.056 -3.94 -2 -5c-1.786 3 -3 4 -4 2z"></path>
                </svg>
                热门帖子
              </h3>
            </div>
            <div class="list-group list-group-flush" id="hot-articles-list">
              <!-- 热帖列表将通过JavaScript动态生成 -->
            </div>
          </div>
        </div>
        <!-- 显示列表的宽度 -->
        <div class="col-12">
          <div class="card">
            <div class="card-body">
              <div class="divide-y" id="artical-items-body">
                <!-- 动态生成帖子列表 -->
              </div>
              <!-- 添加分页组件 -->
              <div class="d-flex justify-content-center mt-4">
                <ul class="pagination" id="article_list_pagination">
                  <!-- 分页按钮将动态生成 -->
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧边栏 -->
      <div class="col-12 col-lg-4">
        <!-- 日历组件 -->
        <div class="card mb-3">
          <div class="card-header">
            <h3 class="card-title">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z"></path>
                <path d="M16 3v4"></path>
                <path d="M8 3v4"></path>
                <path d="M4 11h16"></path>
                <path d="M11 15h1"></path>
                <path d="M12 15v3"></path>
              </svg>
              日历
            </h3>
          </div>
          <div class="card-body">
            <div id="calendar"></div>
          </div>
        </div>

        <!-- 活动组件 -->
        <div class="card mb-3">
          <div class="card-header">
            <h3 class="card-title">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-calendar-event" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
                <path d="M16 3v4"></path>
                <path d="M8 3v4"></path>
                <path d="M4 11h16"></path>
                <path d="M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
                <path d="M12 12l0 4"></path>
              </svg>
              近期活动
            </h3>
          </div>
          <div class="list-group list-group-flush" id="activities-list">
            <!-- 活动列表将通过JavaScript动态生成 -->
          </div>
        </div>

        <!-- 消息推送组件 -->
        <div class="card">
          <div class="card-header">
            <h3 class="card-title">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bell" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6"></path>
                <path d="M9 17v1a3 3 0 0 0 6 0v-1"></path>
              </svg>
              消息通知
            </h3>
          </div>
          <div class="list-group list-group-flush" id="notifications-list">
            <!-- 通知列表将通过JavaScript动态生成 -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 正文 结束 -->
</div>
<!-- 在body结束标签前添加模态框 -->
<div class="modal modal-blur fade" id="detailModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="detailModalTitle"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="detailModalContent">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<!-- 在body结束标签前添加热帖详情模态框 -->
<div class="modal modal-blur fade" id="hotArticleModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="d-flex align-items-center">
          <span class="avatar me-2" id="hotArticleAvatar"></span>
          <div>
            <h5 class="modal-title mb-0" id="hotArticleTitle"></h5>
            <small class="text-muted" id="hotArticleAuthor"></small>
          </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="article-meta mb-3">
          <div class="d-flex align-items-center">
            <span class="me-3">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
                <path d="M12 7v5l3 3"></path>
              </svg>
              <span id="hotArticleTime"></span>
            </span>
            <span class="me-3">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
                <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6"></path>
              </svg>
              <span id="hotArticleViews"></span>
            </span>
            <span class="me-3">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>
              </svg>
              <span id="hotArticleComments"></span>
            </span>
            <span>
              <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-thumb-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"></path>
              </svg>
              <span id="hotArticleLikes"></span>
            </span>
          </div>
        </div>
        <div class="article-content" id="hotArticleContent">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<script>
  $(function () {
    // ========================= 获取版块下帖子信息 =======================
    // 获取当前选中的版块
    let activeLiEl = $('#topBoardList>.active');
    // 构造query string
    let queryString = '';
    let boardData = activeLiEl.data('board');
    // 导航栏版块Item是否绑定版块数据
    if (boardData) {
      // 构造query string 
      queryString = '?boardId=' + boardData.id;
      // 获取版块信息
      getBoardInfo(boardData.id);
    } else {
      // 设置版块名称
      $('#article_list_board_title').html('首页');
      $('#article_list_count_board').hide();
    }

    // ========================= 获取版块信息 =======================
    // 
    function getBoardInfo (boardId) {
      if (!boardId) {
        return;
      }
      // 发送请求， 成功后，显示版块相关信息
      $.ajax({
        type: 'GET',
        url : 'board/getBoardById?id='+boardId,
        success: function(response) {
          if (response.code == 0) {
            // 构建板块信息
            // 板块名
            $('#article_list_board_title').html(response.data.name);
            // 板块下帖子数量
            $('#article_list_count_board').html('帖子数量:'+response.data.articleCount);
          } else {
            $.toast({
              heading: '警告',
              text: response.message,
              icon: 'warning'
            });
          }
        },
        error: function() {
        // 提示信息
        $.toast({
            heading: '错误',
            text: '访问出现问题',
            icon: 'error'
        });
      }
      });
    }

    // ========================= 获取帖子列表 =======================
    // 成功后，调用listBuildArticleList()方法，构建帖子列表
    $.ajax({
      type: 'GET',
      url: '/article/getAllByBoardId'+queryString,
      data: {
        pageNum: 1,  // 默认第一页
        pageSize: 10 // 每页显示10条
      },
      success: function(response) {
        if (response.code == 0) {
          listBuildArticleList(response.data.list);
          // 构建分页
          buildPagination(response.data);
        } else {
          $.toast({
              heading: '警告',
              text: response.message,
              icon: 'warning'
            });
        }
      },
      error: function() {
        // 提示信息
        $.toast({
            heading: '错误',
            text: '访问出现问题',
            icon: 'error'
        });
      }
    });

    // ========================= 构造帖子列表 =======================
    function listBuildArticleList(data) {
      if(data.length == 0) {
        $('#artical-items-body').html('<div class="empty"><p class="empty-title">还没有帖子</p></div>');
        return;
      }
      
      // 清空现有内容
      $('#artical-items-body').empty();
      
      // 默认头像路径
      let avatarUrl = 'image/avatar01.jpeg';
      
      // 遍历结果
      data.forEach(article => {
        // 设置默认头像
        if (!article.user.avatarUrl) {
          article.user.avatarUrl = avatarUrl;
        }
        
        // 构造HTML - 添加card类来分隔每个帖子
        let articleHtmlStr = '<div class="card mb-3">'
          + '<div class="card-body">'
          + '<div class="row">'
          + '<div class="col-auto">'
          + '<span class="avatar avatar-md" style="background-image: url(' + article.user.avatarUrl + ')"></span>'
          + '</div>'
          + '<div class="col">'
          + '<div class="text-truncate">'
          + '<a href="javascript:void(0);" class="article_list_a_title h3 mb-2">'
          + '<strong>' + article.title + '</strong>'
          + '</a>'
          + '</div>'
          + '<div class="text-muted mt-2">'
          + '<div class="row">'
          + '<div class="col">'
          + '<ul class="list-inline list-inline-dots mb-0">'
          + '<li class="list-inline-item">'
          + '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user"'
          + 'width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
          + 'fill="none" stroke-linecap="round" stroke-linejoin="round">'
          + '<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
          + '<path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>'
          + '<path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>'
          + '</svg> '
          + article.user.nickname
          + '</li>'
          + '<li class="list-inline-item">'
          + '<svg xmlns="http://www.w3.org/2000/svg"'
          + 'class="icon icon-tabler icon-tabler-clock-edit" width="24" height="24"'
          + 'viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"'
          + 'stroke-linecap="round" stroke-linejoin="round">'
          + '<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
          + '<path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>'
          + '<path d="M12 7v5l2 2"></path>'
          + '<path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z">'
          + '</path>'
          + '</svg> '
          + article.createTime
          + '</li>'
          + '</ul>'
          + '</div>'
          + '<div class="col-auto">'
          + '<ul class="list-inline list-inline-dots mb-0">'
          + '<li class="list-inline-item">'
          + '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye"'
          + 'width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
          + 'fill="none" stroke-linecap="round" stroke-linejoin="round">'
          + '<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
          + '<path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>'
          + '<path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7">'
          + '</path>'
          + '</svg> '
          + '<span class="text-muted">' + article.visitCount + '</span>'
          + '</li>'
          + '<li class="list-inline-item">'
          + '<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart"'
          + 'width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"'
          + 'fill="none" stroke-linecap="round" stroke-linejoin="round">'
          + '<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
          + '<path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572">'
          + '</path>'
          + '</svg> '
          + '<span class="text-muted">' + article.likeCount + '</span>'
          + '</li>'
          + '<li class="list-inline-item">'
          + '<svg xmlns="http://www.w3.org/2000/svg"'
          + 'class="icon icon-tabler icon-tabler-message-circle" width="24" height="24"'
          + 'viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"'
          + 'stroke-linecap="round" stroke-linejoin="round">'
          + '<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
          + '<path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>'
          + '<path d="M12 12l0 .01"></path>'
          + '<path d="M8 12l0 .01"></path>'
          + '<path d="M16 12l0 .01"></path>'
          + '</svg> '
          + '<span class="text-muted">' + article.replyCount + '</span>'
          + '</li>'
          + '</ul>'
          + '</div>'
          + '</div>'
          + '</div>'
          + '</div>'
          + '</div>'
          + '</div>';

        // 转为元素对象
        let articleItem = $(articleHtmlStr);
        // 获取标题的 a 标签
        let articleTitle = articleItem.find('.article_list_a_title');
        // 处理标题点击事件
        articleTitle.click(function() {
          // 通过全局变量保存当前访问的帖子信息
          currentArticle = article;
          removeNavActive();
          $('#bit-forum-content').load('details.html');
        });
        // 添加到列表
        $('#artical-items-body').append(articleItem);
      });
    }

    // ================== 处理发贴事件 =====================
    $('.article_post').click(function () {
      console.log('加载发贴页面');
      removeNavActive();
      $('#bit-forum-content').load('article.html');
    });

    // 添加构建分页的方法
    function buildPagination(pageInfo) {
      let paginationEl = $('#article_list_pagination');
      paginationEl.empty();
      
      // 如果总页数小于等于1，不显示分页
      if (pageInfo.pages <= 1) {
        return;
      }
      
      // 上一页按钮
      let prevBtn = $('<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页</a></li>');
      if (pageInfo.pageNum == 1) {
        prevBtn.addClass('disabled');
      }
      prevBtn.click(function() {
        if (pageInfo.pageNum > 1) {
          loadArticleList(pageInfo.pageNum - 1);
        }
      });
      paginationEl.append(prevBtn);
      
      // 页码按钮
      for (let i = 1; i <= pageInfo.pages; i++) {
        let pageBtn = $('<li class="page-item"><a class="page-link" href="javascript:void(0);">' + i + '</a></li>');
        if (i == pageInfo.pageNum) {
          pageBtn.addClass('active');
        }
        pageBtn.click(function() {
          loadArticleList(i);
        });
        paginationEl.append(pageBtn);
      }
      
      // 下一页按钮
      let nextBtn = $('<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页</a></li>');
      if (pageInfo.pageNum == pageInfo.pages) {
        nextBtn.addClass('disabled');
      }
      nextBtn.click(function() {
        if (pageInfo.pageNum < pageInfo.pages) {
          loadArticleList(pageInfo.pageNum + 1);
        }
      });
      paginationEl.append(nextBtn);
    }

    // 添加加载帖子列表的方法
    function loadArticleList(pageNum) {
      let queryString = '';
      let boardData = $('#topBoardList>.active').data('board');
      if (boardData) {
        queryString = '?boardId=' + boardData.id;
      }
      
      $.ajax({
        type: 'GET',
        url: '/article/getAllByBoardId'+queryString,
        data: {
          pageNum: pageNum,
          pageSize: 10
        },
        success: function(response) {
          if (response.code == 0) {
            listBuildArticleList(response.data.list);
            buildPagination(response.data);
          } else {
            $.toast({
              heading: '警告',
              text: response.message,
              icon: 'warning'
            });
          }
        }
      });
    }

    // ========================= 构建热帖列表 =======================
    function buildHotArticles() {
      // 只在首页显示热帖
      if (!boardData) {
        const hotArticles = [
          {
            id: 1,
            title: '如何提高编程效率？分享十个实用技巧',
            author: '编程达人',
            publishTime: '2025-01-15',
            likes: 358,
            comments: 89,
            avatarUrl: 'image/avatar01.jpeg',
            details: '本文分享了十个提高编程效率的实用技巧：\n\n1. 使用代码片段和模板\n2. 掌握快捷键操作\n3. 善用IDE的智能提示\n4. 建立个人代码库\n5. 使用版本控制工具\n6. 编写清晰的注释\n7. 定期重构代码\n8. 使用自动化测试\n9. 学习设计模式\n10. 保持代码整洁\n\n这些技巧都是作者多年编程经验的总结，希望能帮助到各位开发者。'
          },
          {
            id: 2,
            title: '2025年最受欢迎的编程语言排行榜',
            author: '技术先锋',
            publishTime: '2025-01-14',
            likes: 426,
            comments: 156,
            avatarUrl: 'image/avatar02.jpeg',
            details: '根据最新的开发者调查和行业趋势，2025年最受欢迎的编程语言排名如下：\n\n1. Python - 持续领跑，在AI和数据分析领域占据主导地位\n2. JavaScript - 前端开发的首选，Node.js生态持续繁荣\n3. Java - 企业级应用开发的主力军\n4. Go - 云原生和微服务架构的首选\n5. Rust - 系统编程和性能关键型应用的新宠\n\n每个语言都有其独特的优势和应用场景，选择适合项目需求的语言才是最重要的。'
          },
          {
            id: 3,
            title: '人工智能发展现状与未来趋势分析',
            author: 'AI研究者',
            publishTime: '2025-01-13',
            likes: 512,
            comments: 203,
            avatarUrl: 'image/avatar03.jpeg',
            details: '人工智能领域在2025年呈现出以下发展趋势：\n\n1. 大语言模型继续演进\n   - 模型规模持续扩大\n   - 推理能力显著提升\n   - 多模态能力增强\n\n2. 边缘计算AI应用普及\n   - 设备端AI处理能力提升\n   - 隐私保护得到加强\n   - 实时响应能力改善\n\n3. AI伦理和监管\n   - 各国AI监管框架完善\n   - 企业AI伦理委员会普及\n   - 透明度和可解释性要求提高\n\n4. 行业应用深化\n   - 医疗诊断辅助系统\n   - 智能制造优化\n   - 金融风控系统\n\n未来AI发展将更加注重实用性和安全性。'
          }
        ];

        const hotArticlesList = $('#hot-articles-list');
        hotArticlesList.empty();

        hotArticles.forEach(article => {
          const articleHtml = `
            <div class="list-group-item">
              <div class="row align-items-center">
                <div class="col-auto">
                  <span class="avatar" style="background-image: url(${article.avatarUrl})"></span>
                </div>
                <div class="col text-truncate">
                  <a href="javascript:void(0);" class="text-reset d-block" data-article-id="${article.id}">${article.title}</a>
                  <div class="d-flex mt-1 align-items-center">
                    <span class="text-muted">${article.author}</span>
                    <span class="text-muted ms-2">${article.publishTime}</span>
                    <span class="ms-auto">
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-thumb-up" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"></path>
                      </svg>
                      ${article.likes}
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-circle ms-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>
                      </svg>
                      ${article.comments}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          `;
          hotArticlesList.append(articleHtml);
        });

        // 修改热门帖子点击事件
        $('.list-group-item a[data-article-id]').click(function() {
          const articleId = $(this).data('article-id');
          const article = hotArticles.find(a => a.id === articleId);
          if (article) {
            // 设置头像
            $('#hotArticleAvatar').css('background-image', `url(${article.avatarUrl})`);
            // 设置标题
            $('#hotArticleTitle').text(article.title);
            // 设置作者
            $('#hotArticleAuthor').text(article.author);
            // 设置时间
            $('#hotArticleTime').text(article.publishTime);
            // 设置浏览量（模拟数据）
            $('#hotArticleViews').text('1.2k');
            // 设置评论数
            $('#hotArticleComments').text(article.comments);
            // 设置点赞数
            $('#hotArticleLikes').text(article.likes);
            // 设置内容
            $('#hotArticleContent').html(`
              <div class="article-section">
                <h6>内容摘要</h6>
                <p>${article.details.split('\n')[0]}</p>
              </div>
              <div class="article-section">
                <h6>主要内容</h6>
                <p style="white-space: pre-line">${article.details}</p>
              </div>
            `);
            // 显示模态框
            $('#hotArticleModal').modal('show');
          }
        });

        // 显示热帖区域
        $('#hot-articles-section').show();
      } else {
        // 非首页不显示热帖区域
        $('#hot-articles-section').hide();
      }
    }

    // 初始化热帖列表
    buildHotArticles();

    // ========================= 初始化日历 =======================
    function initCalendar() {
      const today = new Date();
      const currentMonth = today.getMonth();
      const currentYear = today.getFullYear();
      
      const firstDay = new Date(currentYear, currentMonth, 1);
      const lastDay = new Date(currentYear, currentMonth + 1, 0);
      
      let calendarHtml = '<div class="calendar-header">';
      calendarHtml += `<div class="calendar-title">${currentYear}年${currentMonth + 1}月</div>`;
      calendarHtml += '</div>';
      calendarHtml += '<div class="calendar-grid">';
      
      // 添加星期标题
      const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
      weekDays.forEach(day => {
        calendarHtml += `<div class="calendar-weekday">${day}</div>`;
      });
      
      // 添加日期
      for (let i = 0; i < firstDay.getDay(); i++) {
        calendarHtml += '<div class="calendar-day empty"></div>';
      }
      
      for (let i = 1; i <= lastDay.getDate(); i++) {
        const isToday = i === today.getDate();
        calendarHtml += `<div class="calendar-day ${isToday ? 'today' : ''}">${i}</div>`;
      }
      
      calendarHtml += '</div>';
      $('#calendar').html(calendarHtml);
    }

    // ========================= 初始化活动列表 =======================
    function initActivities() {
      const activities = [
        {
          id: 1,
          title: '2025年春季编程大赛',
          date: '2025-03-15',
          location: '线上',
          description: '一年一度的编程大赛即将开始，快来参加吧！',
          details: '本次编程大赛面向所有编程爱好者，比赛时间为3月15日至3月20日。参赛者需要在规定时间内完成指定项目，评审将根据代码质量、创新性和完成度进行评分。获奖者将获得丰厚奖品和实习机会。'
        },
        {
          id: 2,
          title: '技术分享会：AI前沿技术',
          date: '2025-03-20',
          location: '科技大厦',
          description: '邀请业内专家分享AI最新发展动态',
          details: '本次技术分享会将邀请多位AI领域的专家，分享内容包括：1. 大语言模型的最新进展；2. 计算机视觉在工业中的应用；3. 机器学习算法优化实践。分享会结束后设有问答环节，欢迎各位技术爱好者参与讨论。'
        },
        {
          id: 3,
          title: '开源项目协作日',
          date: '2025-03-25',
          location: '线上',
          description: '一起参与开源项目，提升编程技能',
          details: '开源项目协作日旨在促进开源社区的发展，活动内容包括：1. 开源项目介绍；2. 协作开发实践；3. 代码审查讨论。参与者可以选择感兴趣的项目加入，与全球开发者一起协作。'
        }
      ];

      const activitiesList = $('#activities-list');
      activitiesList.empty();

      activities.forEach(activity => {
        const activityHtml = `
          <a href="javascript:void(0);" class="list-group-item list-group-item-action" data-activity-id="${activity.id}">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">${activity.title}</h5>
              <small class="text-muted">${activity.date}</small>
            </div>
            <p class="mb-1">${activity.location}</p>
          </a>
        `;
        activitiesList.append(activityHtml);
      });

      // 添加活动点击事件
      $('.list-group-item[data-activity-id]').click(function() {
        const activityId = $(this).data('activity-id');
        const activity = activities.find(a => a.id === activityId);
        if (activity) {
          // 显示活动详情模态框
          $('#detailModalTitle').text(activity.title);
          $('#detailModalContent').html(`
            <div class="mb-3">
              <h6>活动时间</h6>
              <p>${activity.date}</p>
            </div>
            <div class="mb-3">
              <h6>活动地点</h6>
              <p>${activity.location}</p>
            </div>
            <div class="mb-3">
              <h6>活动简介</h6>
              <p>${activity.description}</p>
            </div>
            <div>
              <h6>详细内容</h6>
              <p>${activity.details}</p>
            </div>
          `);
          $('#detailModal').modal('show');
        }
      });
    }

    // ========================= 初始化通知列表 =======================
    function initNotifications() {
      const notifications = [
        {
          id: 1,
          title: '新回复通知',
          content: '您的帖子"如何提高编程效率"收到新的回复',
          time: '10分钟前',
          type: 'reply',
          details: '用户"技术达人"在您的帖子中回复：\n"感谢分享这些实用技巧，特别是关于代码重构的部分，让我受益匪浅。我也有一些经验想分享..."'
        },
        {
          id: 2,
          title: '系统通知',
          content: '系统将于今晚22:00进行维护升级',
          time: '1小时前',
          type: 'system',
          details: '为了提供更好的服务体验，系统将于今晚22:00-23:00进行例行维护升级。升级内容包括：\n1. 优化服务器性能\n2. 修复已知bug\n3. 更新安全补丁\n维护期间网站将暂时无法访问，给您带来的不便敬请谅解。'
        },
        {
          id: 3,
          title: '点赞通知',
          content: '您的评论收到5个新的点赞',
          time: '2小时前',
          type: 'like',
          details: '您的评论"关于Spring Boot的最佳实践"获得了以下用户的点赞：\n- 开发者A\n- 开发者B\n- 开发者C\n- 开发者D\n- 开发者E'
        }
      ];

      const notificationsList = $('#notifications-list');
      notificationsList.empty();

      notifications.forEach(notification => {
        const notificationHtml = `
          <a href="javascript:void(0);" class="list-group-item list-group-item-action" data-notification-id="${notification.id}">
            <div class="d-flex w-100 justify-content-between">
              <h5 class="mb-1">${notification.title}</h5>
              <small class="text-muted">${notification.time}</small>
            </div>
            <p class="mb-1">${notification.content}</p>
          </a>
        `;
        notificationsList.append(notificationHtml);
      });

      // 添加通知点击事件
      $('.list-group-item[data-notification-id]').click(function() {
        const notificationId = $(this).data('notification-id');
        const notification = notifications.find(n => n.id === notificationId);
        if (notification) {
          // 显示通知详情模态框
          $('#detailModalTitle').text(notification.title);
          $('#detailModalContent').html(`
            <div class="mb-3">
              <h6>通知时间</h6>
              <p>${notification.time}</p>
            </div>
            <div class="mb-3">
              <h6>通知内容</h6>
              <p>${notification.content}</p>
            </div>
            <div>
              <h6>详细信息</h6>
              <p style="white-space: pre-line">${notification.details}</p>
            </div>
          `);
          $('#detailModal').modal('show');
        }
      });
    }

    // 初始化所有组件
    initCalendar();
    initActivities();
    initNotifications();
  });
</script>

<style>
  /* 日历样式 */
  .calendar-header {
    text-align: center;
    margin-bottom: 10px;
  }
  
  .calendar-title {
    font-size: 1.2em;
    font-weight: bold;
  }
  
  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
  }
  
  .calendar-weekday {
    text-align: center;
    font-weight: bold;
    padding: 5px;
  }
  
  .calendar-day {
    text-align: center;
    padding: 5px;
    border-radius: 3px;
  }
  
  .calendar-day.today {
    background-color: #206de0;
    color: white;
  }
  
  .calendar-day.empty {
    background-color: #f5f5f5;
  }
  
  /* 活动列表样式 */
  .list-group-item {
    transition: all 0.3s ease;
  }
  
  .list-group-item:hover {
    background-color: #f8f9fa;
  }
  
  /* 通知列表样式 */
  .list-group-item h5 {
    color: #206de0;
  }
  
  /* 模态框样式 */
  .modal-content {
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
  
  .modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
  }
  
  .modal-title {
    color: #206de0;
    font-weight: 600;
  }
  
  .modal-body h6 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 0.5rem;
  }
  
  .modal-body p {
    color: #6c757d;
    margin-bottom: 1rem;
  }
  
  .modal-footer {
    border-top: 1px solid #dee2e6;
    background-color: #f8f9fa;
  }
  
  /* 标语样式 */
  .page-pretitle {
    margin: 1rem 0;
  }

  .slogan-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(32, 109, 224, 0.1);
    overflow: hidden;
  }

  .slogan-text {
    color: #206de0;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    margin: 0 1.5rem;
    z-index: 1;
    animation: glow 2s ease-in-out infinite;
  }

  .slogan-icon-left, .slogan-icon-right {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #206de0;
    border-radius: 50%;
    color: white;
    z-index: 1;
  }

  .slogan-icon-left svg, .slogan-icon-right svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
  }

  .slogan-icon-left {
    animation: bounce-left 2s ease-in-out infinite;
  }

  .slogan-icon-right {
    animation: bounce-right 2s ease-in-out infinite;
  }

  .slogan-decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
      rgba(32, 109, 224, 0.1) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(32, 109, 224, 0.1) 50%, 
      rgba(32, 109, 224, 0.1) 75%, 
      transparent 75%, 
      transparent);
    background-size: 20px 20px;
    opacity: 0.5;
    animation: move-bg 15s linear infinite;
  }

  @keyframes glow {
    0%, 100% {
      text-shadow: 0 0 5px rgba(32, 109, 224, 0.3);
    }
    50% {
      text-shadow: 0 0 20px rgba(32, 109, 224, 0.5);
    }
  }

  @keyframes bounce-left {
    0%, 100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(5px);
    }
  }

  @keyframes bounce-right {
    0%, 100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-5px);
    }
  }

  @keyframes move-bg {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 40px 40px;
    }
  }

  /* 响应式调整 */
  @media (max-width: 768px) {
    .slogan-text {
      font-size: 1rem;
    }
    .slogan-icon-left, .slogan-icon-right {
      width: 32px;
      height: 32px;
    }
  }

  /* 热帖详情模态框样式 */
  #hotArticleModal .modal-content {
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  }
  
  #hotArticleModal .modal-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
    border-radius: 12px 12px 0 0;
  }
  
  #hotArticleModal .modal-title {
    color: #206de0;
    font-weight: 600;
  }
  
  #hotArticleModal .article-meta {
    background-color: #f8f9fa;
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
  }
  
  #hotArticleModal .article-meta .icon {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
    color: #206de0;
  }
  
  #hotArticleModal .article-section {
    margin-bottom: 1.5rem;
  }
  
  #hotArticleModal .article-section h6 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
  }
  
  #hotArticleModal .article-section p {
    color: #6c757d;
    line-height: 1.6;
  }
  
  #hotArticleModal .modal-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    border-radius: 0 0 12px 12px;
  }
</style>